<route lang="json5" type="payList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '设备管理 > 分组标签',
    enablePullDownRefresh:false,
    onReachBottomDistance:50,
  },
}
</route>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue'
import { getPayList } from '@/api/device'

const tab = ref('bank')
onLoad((options) => {
  tab.value = options.tab || 'bank'
})
const loadState = ref<'loading' | 'error' | 'finished'>('loading')
const page = ref(1)
const dataList = ref([]) // 列表数据
const total = ref(50) // 总数据量
function loadMore() {
  console.log('滚动到底部加载更多数据')
  if (loadState.value === 'finished') {
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  loadMore()
})
onReachBottom(() => {
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
const showEdit = ref(false)
const editRef = ref()
const formModel = ref({
  name: '',
  price: '',
  date: dayjs().format('YYYY-MM-DD HH:mm:ss'),

})
function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      handleClose()
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
const editType = ref(0)
function handleEdit(index: number) {
  editType.value = index
  showEdit.value = true
  if (editRef.value) {
    editRef.value.reset()
  }
}
function handleClose() {
  showEdit.value = false
}
const showWXEdit = ref(false)
const wxForm = ref({
  name: 'test',
  account: '2734827329',
  openid: '7381hjsjdbasbd',
  date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
})
const wxRef = ref()
function handleWXEdit() {
  showWXEdit.value = true
  if (wxRef.value) {
    wxRef.value.reset()
  }
}
function handleWXSubmit() {
  wxRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      showWXEdit.value = false
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
</script>

<template>
  <view class="bottom-btn-pd">
    <view class="wot-list-top-wrap">
      <wd-tabs v-model="tab" :sticky="true" :offset-top="0">
        <wd-tab title="银行卡" name="bank">
          <view class="wot-row wot-title">
            <wd-row>
              <wd-col :span="5">
                <view class="wot-item">
                  选择
                </view>
              </wd-col>
              <wd-col :span="5">
                <view class="wot-item">
                  开户名
                </view>
              </wd-col>
              <wd-col :span="7">
                <view class="wot-item">
                  银行卡号
                </view>
              </wd-col>
              <wd-col :span="7">
                <view class="wot-item">
                  状态 / 操作
                </view>
              </wd-col>
            </wd-row>
          </view>
        </wd-tab>
        <wd-tab title="微信" name="wechat">
          <view class="wot-row wot-title">
            <wd-row>
              <wd-col :span="5">
                <view class="wot-item">
                  选择
                </view>
              </wd-col>
              <wd-col :span="5">
                <view class="wot-item">
                  名称
                </view>
              </wd-col>
              <wd-col :span="7">
                <view class="wot-item">
                  账号
                </view>
              </wd-col>
              <wd-col :span="7">
                <view class="wot-item">
                  状态 / 操作
                </view>
              </wd-col>
            </wd-row>
          </view>
        </wd-tab>
        <wd-tab title="支付宝" name="alipay">
          <view />
        </wd-tab>
      </wd-tabs>
    </view>
    <block v-if="tab === 'bank'">
      <view v-if="dataList.length === 0" class="pt-20">
        <wd-status-tip image="content" tip="暂无内容" />
      </view>
      <view v-else class="wot-list">
        <view v-for="(item, index) in dataList" :key="index" class="wot-row">
          <wd-row>
            <wd-col :span="5">
              <view class="wot-item">
                礼品机
              </view>
            </wd-col>
            <wd-col :span="5">
              <view class="wot-item">
                haued
              </view>
            </wd-col>
            <wd-col :span="7">
              <view class="wot-item">
                732812638621836
              </view>
            </wd-col>
            <wd-col :span="7">
              <view class="wot-item">
                <wd-tag type="primary" custom-class="tag" @click="handleEdit(1)">
                  修改
                </wd-tag>
              </view>
            </wd-col>
          </wd-row>
        </view>
        <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
      </view>
      <safe-bottom>
        <wd-button type="primary" size="small" block @click="handleEdit(0)">
          新增
        </wd-button>
      </safe-bottom>
      <wd-action-sheet v-model="showEdit" :title="`【 ${editType === 0 ? '新增' : '编辑'} > 银行卡 】`" @close="handleClose">
        <view class="action-sheet-content">
          <wd-form ref="editRef" :model="formModel">
            <wd-cell-group border>
              <wd-input
                v-model="formModel.name"
                label="开户名称"
                label-width="100px"
                prop="name"
                clearable
                placeholder="开户名称"
                :rules="[{ required: true, message: '请填写开户名称' }]"
              />
              <wd-input
                v-model="formModel.price"
                label="开户账号"
                label-width="100px"
                prop="price"
                clearable
                placeholder="开户账号"
                :rules="[{ required: true, message: '请填写开户账号' }]"
              />
              <wd-input
                v-model="formModel.price"
                label="开户账号"
                label-width="100px"
                prop="price"
                clearable
                placeholder="开户账号"
                :rules="[{ required: true, message: '请填写开户账号' }]"
              />
              <wd-input
                v-model="formModel.price"
                label="开户地址"
                label-width="100px"
                prop="price"
                clearable
                placeholder="开户地址"
                :rules="[{ required: true, message: '请填写开户地址' }]"
              />
            </wd-cell-group>
            <view class="btn-outer-pd">
              <wd-button type="primary" size="small" block @click="handleSubmit">
                提交
              </wd-button>
            </view>
          </wd-form>
        </view>
      </wd-action-sheet>
    </block>
    <block v-if="tab === 'wechat'">
      <view v-if="dataList.length === 0" class="pt-20">
        <wd-status-tip image="content" tip="暂无内容" />
      </view>
      <view v-else class="wot-list">
        <view v-for="(item, index) in dataList" :key="index" class="wot-row">
          <wd-row>
            <wd-col :span="5">
              <view class="wot-item">
                礼品机
              </view>
            </wd-col>
            <wd-col :span="5">
              <view class="wot-item">
                <wd-tag custom-class="tag" type="success">
                  test
                </wd-tag>
              </view>
            </wd-col>
            <wd-col :span="7">
              <view class="wot-item">
                <wd-tag custom-class="tag" plain>
                  2734827329
                </wd-tag>
              </view>
            </wd-col>
            <wd-col :span="7">
              <view class="wot-item">
                <wd-tag type="primary" custom-class="tag" @click="handleWXEdit()">
                  修改
                </wd-tag>
              </view>
            </wd-col>
          </wd-row>
        </view>
        <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
      </view>
      <safe-bottom>
        <wd-button type="primary" size="small" block>
          绑定当前微信
        </wd-button>
      </safe-bottom>
      <wd-action-sheet v-model="showWXEdit" title="【 编辑 > 微信 】" @close="handleClose">
        <view class="action-sheet-content">
          <wd-form ref="wxRef" :model="wxForm">
            <wd-cell-group border>
              <wd-input
                v-model="wxForm.name"
                label="名称"
                label-width="100px"
                prop="name"
                clearable
                placeholder="名称"
                :rules="[{ required: true, message: '请填写名称' }]"
              />
              <wd-input
                v-model="wxForm.account"
                label="账号"
                label-width="100px"
                prop="account"
                clearable
                placeholder="账号"
                :rules="[{ required: true, message: '请填写账号' }]"
              />
              <wd-input
                v-model="wxForm.openid"
                label="openid"
                label-width="100px"
                prop="openid"
                clearable
                readonly
              />
              <wd-input
                v-model="wxForm.date"
                label="添加时间"
                label-width="100px"
                prop="date"
                clearable
                readonly
              />
            </wd-cell-group>
            <view class="btn-outer-pd">
              <wd-button type="primary" size="small" block @click="handleWXSubmit">
                提交
              </wd-button>
            </view>
          </wd-form>
        </view>
      </wd-action-sheet>
    </block>
    <block v-if="tab === 'alipay'">
      <view class="pt-20">
        <wd-status-tip image="content" tip="暂无内容" />
      </view>
    </block>
  </view>
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
</style>
